<script setup>
import { ref, watch, onMounted, nextTick } from 'vue'
import { usePopStore, useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import NavComponent from '@/views/operation/fly-verify/component/nav-component.vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import img1 from '@img/pop/01.png'
import img2 from '@img/pop/02.png'
import img3 from '@img/pop/03.png'
import img4 from '@img/pop/04.png'
const popStore = usePopStore()
const airStore = useAirStore()
const { Qx, XY, showColorBar } = storeToRefs(popStore)

const navBar = ref('基本信息')
const navList = ref(['基本信息', '气象指标', '数据统计', '告警预警'])
const headerList = ref({
  垂直激光测风雷达: ['监测时间', '水平风速', '水平方向', '垂直气流'],
  能见度仪: ['监测时间', '能见度'],
  小型气象站: ['时间', '温度', '湿度', '风速', '风向', '气压', '降水']
})
const dataList = ref({
  垂直激光测风雷达: [],
  能见度仪: [],
  小型气象站: []
})
const imgs = {
  '3D激光测风雷达': img1,
  大气电场仪: img2,
  垂直激光测风雷达: img2,
  小型气象站: img3,
  能见度仪: img4
}
const close = () => {
  navBar.value = '基本信息'
  Qx.value.showPop = false
  showColorBar.value = false
  __g.vectorField.clear()
}

onMounted(() => {
  getZblist()
})
const getChart = (name, list = [], arr, originalOption) => {
  let option = JSON.parse(JSON.stringify(originalOption.value))
  let timeList = [],
    data1 = [],
    data2 = []
  for (let i = 0; i < list.length; i++) {
    const element = list[i]
    if (arr[0] === 'timestamp') {
      timeList.push(element[arr[0]].replace(' ', '\n'))
    } else {
      timeList.push(element.date + '\n' + element.time)
    }
    data1.push(element[arr[1]])
    data2.push(element[arr[2]])
  }
  option.xAxis[0].data = timeList
  option.series[0].data = data1
  option.series[1].data = data2
  if (name === '能见度仪') {
    option.series[0].name = '能见度'
    option.series[1].name = ''
    option.yAxis[0].name = '单位:m'
    option.yAxis[1].name = ''
    option.legend.data = []
    option.series[1].data = []
  } else {
    option.series[0].name = '风向'
    option.series[1].name = '风速'
    option.yAxis[0].name = '单位:°'
    option.yAxis[1].name = '单位:m/s'
    option.legend.data = ['风向', '风速']
  }
  originalOption.value = option
}
const getZblist = () => {
  dataList.value['垂直激光测风雷达'] = airStore.weatherData
  dataList.value['能见度仪'] = airStore.visibilityData
  dataList.value['小型气象站'] = airStore.smallWeatherData
  getChart('垂直激光测风雷达', airStore.weatherData, ['time', 'direction', 'windSpeed'], option1)
  getChart('能见度仪', airStore.visibilityData, ['timestamp', 'visibility', 'altitude'], option2)
  getChart(
    '小型气象站',
    airStore.smallWeatherData,
    ['timestamp', 'windDirection', 'windSpeed'],
    option3
  )
}
// 响应子组件点击tab
const clickNavBar = (item) => {
  if (navBar.value == item) {
    return
  }
  navBar.value = item
}
const getLevel = (type, num) => {
  if (type === '能见度仪') {
    if (num > 1800 && num <= 2100) {
      return '初级'
    } else if (num >= 1500 && num < 1800) {
      return '中级'
    } else if (num < 1500) {
      return '高级'
    } else {
      return '暂无'
    }
  } else {
    if (num > 7 && num <= 7.9) {
      return '初级'
    } else if (num > 8.0 && num <= 9.9) {
      return '中级'
    } else if (num > 10) {
      return '中级'
    } else {
      return '暂无'
    }
  }
}

import * as echarts from 'echarts'
const optionData = {
  animation: true,
  tooltip: {
    trigger: 'axis',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14,
      marginLeft: '-20px'
    }
  },
  grid: {
    left: '8%',
    right: '8%',
    bottom: '2%',
    top: '16%',
    containLabel: true
  },
  legend: {
    data: ['风向', '风速'],
    textStyle: {
      fontSize: 10,
      color: 'rgb(167,177,187)'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: ['14:20', '14:30', '14:40', '14:50', '14:60'],
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '单位：°',
      splitNumber: 3,
      // max: 400,
      nameTextStyle: {
        padding: [0, -20, 0, 0],
        color: 'rgba(255,255,255,.7)'
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        },
        formatter: '{value}'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    },
    {
      type: 'value',
      name: '单位：m/s',
      // max: 40,
      splitNumber: 3,
      nameTextStyle: {
        padding: [0, 0, 0, -40],
        color: 'rgba(255,255,255,.7)'
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.7)'
        },
        formatter: '{value}'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      animation: {
        // 对该系列的特定设置
        duration: 2000, // 动画持续时间，单位毫秒
        easing: 'bounceOut' // 动画缓动效果
      },
      name: '风向',
      type: 'line',
      showSymbol: false,
      smooth: true,
      symbolSize: 8,
      yAxisIndex: 0,
      lineStyle: {
        color: '#3CE4E8'
      },
      itemStyle: {
        // 设置symbol的颜色
        normal: {
          color: '#3CE4E8'
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(60, 228, 232, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(60, 228, 232, 0)'
          }
        ])
      },
      data: [120, 230, 380, 280, 180]
    },
    {
      name: '风速',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      showSymbol: false,
      symbolSize: 8,
      lineStyle: {
        color: '#FFF37C'
      },
      itemStyle: {
        // 设置symbol的颜色
        normal: {
          color: '#FFF37C'
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(255, 243, 124, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(255, 243, 124, 0)'
          }
        ])
      },
      data: [12, 22, 18, 24, 12]
    }
  ]
}
const option1 = ref(optionData)
const option2 = ref(optionData)
const option3 = ref(optionData)
</script>
<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated  animate__fadeIn"
    leave-active-class="animate__animated animate__faster  animate__fadeOut"
  >
    <div class="AirspacePop" ref="currentDom" v-if="Qx.showPop">
      <p class="title">
        <span>{{ Qx.popInfo.type }}设备属性</span>
        <span @click="close"><img src="@img/pop/close_icon.png" alt="" /></span>
      </p>
      <div class="content">
        <NavComponent
          class="NavComponent"
          :navBar="navBar"
          :navList="navList"
          @clickNavBar="clickNavBar"
        ></NavComponent>
        <div v-if="navBar === '基本信息'">
          <div class="info_box">
            <img :src="imgs[Qx.popInfo.type]" alt="" />
            <div class="right_info">
              <p>
                <span>· <i>设施设备</i>：</span><span>{{ Qx.popInfo.type }}</span>
              </p>
              <p>
                <span>· <i>经度</i>：</span><span>{{ Qx.popInfo.lon }}</span>
              </p>
              <p>
                <span>· <i>维度</i>：</span><span>{{ Qx.popInfo.lat }}</span>
              </p>
              <p>
                <span>· <i>海拔</i>：</span><span>400米</span>
              </p>
            </div>
          </div>
        </div>
        <div v-else-if="navBar === '气象指标'">
          <div class="table">
            <ul class="thead">
              <li v-for="(item, index) in headerList[Qx.popInfo.type]" :key="index">{{ item }}</li>
            </ul>
            <ul class="tbody">
              <vue3-seamless-scroll
                :list="dataList[Qx.popInfo.type]"
                :step="0.3"
                :hover="true"
                :isRemUnit="true"
                :wheel="true"
                :delay="3"
                :limitScrollNum="4"
              >
                <li v-for="(item, index) in dataList[Qx.popInfo.type]" :key="index">
                  <template v-if="Qx.popInfo.type == '垂直激光测风雷达'">
                    <p class="sd">
                      <el-tooltip
                        effect="dark"
                        :content="item.date + ' ' + item.time"
                        placement="top"
                      >
                        <span>{{ item.date }} {{ item.time }}</span></el-tooltip
                      >
                    </p>
                    <p>{{ item.windSpeed }}m/s</p>
                    <p>{{ item.direction }}</p>
                    <p>{{ item.VerticalWindSpeed }}m/s</p>
                  </template>
                  <!-- 能见度仪 -->
                  <template v-if="Qx.popInfo.type == '能见度仪'">
                    <p class="sd">
                      <el-tooltip effect="dark" :content="item.timestamp" placement="top">
                        <span>{{ item.timestamp }}</span></el-tooltip
                      >
                    </p>
                    <p>{{ item.visibility }}米</p>
                  </template>
                  <!-- 小型气象站 -->
                  <template v-if="Qx.popInfo.type == '小型气象站'">
                    <p class="sd">
                      <el-tooltip effect="dark" :content="item.timestamp" placement="top">
                        <span>{{ item.timestamp }}</span></el-tooltip
                      >
                    </p>
                    <p>{{ item.temperature }}℃</p>
                    <p>{{ item.humidity }}%RH</p>
                    <p>{{ item.windSpeed }}m/s</p>
                    <p>{{ item.windDirection }}°</p>
                    <p>{{ item.atmosphericPressure }}hPa</p>
                    <p>{{ item.precipitation }}mm</p>
                  </template>
                </li>
              </vue3-seamless-scroll>
            </ul>
          </div>
        </div>
        <div v-else-if="navBar === '数据统计'">
          <div class="chart">
            <Charts v-if="Qx.popInfo.type === '垂直激光测风雷达'" :option="option1" />
            <Charts v-if="Qx.popInfo.type === '能见度仪'" :option="option2" />
            <Charts v-if="Qx.popInfo.type === '小型气象站'" :option="option3" />
          </div>
        </div>
        <div v-else-if="navBar === '告警预警'">
          <div class="table">
            <ul class="thead">
              <li>告警时间</li>
              <li>告警类型</li>
              <li>告警等级</li>
              <li>告警描述</li>
            </ul>
            <ul class="tbody">
              <vue3-seamless-scroll
                :list="dataList[Qx.popInfo.type]"
                :step="0.3"
                :hover="true"
                :isRemUnit="true"
                :wheel="true"
                :delay="3"
                :limitScrollNum="4"
              >
                <li v-for="(item, index) in dataList[Qx.popInfo.type]" :key="index">
                  <template v-if="Qx.popInfo.type === '垂直激光测风雷达'">
                    <p class="sd">{{ item.date }} {{ item.time }}</p>
                    <p>
                      {{
                        getLevel('垂直激光测风雷达', item.VerticalWindSpeed) == '暂无'
                          ? '正常'
                          : '风速异常'
                      }}
                    </p>
                    <p>
                      {{ getLevel('垂直激光测风雷达', item.VerticalWindSpeed) }}
                    </p>
                    <p
                      class="sd"
                      v-if="getLevel('垂直激光测风雷达', item.VerticalWindSpeed) == '暂无'"
                    >
                      暂无
                    </p>
                    <p class="sd" v-else>
                      <el-tooltip
                        effect="dark"
                        :content="`风速超过${getLevel('垂直激光测风雷达', item.VerticalWindSpeed)}安全起降阈值`"
                        placement="top"
                      >
                        <span
                          >风速超过{{
                            getLevel('垂直激光测风雷达', item.VerticalWindSpeed)
                          }}安全起降阈值</span
                        >
                      </el-tooltip>
                    </p>
                  </template>
                  <!-- 能见度仪 -->
                  <template v-if="Qx.popInfo.type === '能见度仪'">
                    <p class="sd">
                      {{ item.timestamp }}
                    </p>
                    <p>
                      {{ getLevel('能见度仪', item.visibility) == '暂无' ? '正常' : '能见度异常' }}
                    </p>
                    <p>{{ getLevel('能见度仪', item.visibility) }}</p>
                    <p class="sd" v-if="getLevel('能见度仪', item.visibility) == '暂无'">暂无</p>
                    <p class="sd" v-else>
                      <el-tooltip
                        effect="dark"
                        :content="`能见度低于${getLevel('能见度仪', item.visibility)}安全起降阈值`"
                        placement="top"
                      >
                        <span
                          >能见度低于{{ getLevel('能见度仪', item.visibility) }}安全起降阈值</span
                        >
                      </el-tooltip>
                    </p>
                  </template>

                  <!-- 小型气象站 -->
                  <template v-if="Qx.popInfo.type === '小型气象站'">
                    <p class="sd">
                      {{ item.timestamp }}
                    </p>
                    <p>
                      {{ getLevel('小型气象站', item.windSpeed) == '暂无' ? '正常' : '风速异常' }}
                    </p>
                    <p>{{ getLevel('小型气象站', item.windSpeed) }}</p>
                    <p class="sd" v-if="getLevel('小型气象站', item.windSpeed) == '暂无'">暂无</p>
                    <p class="sd" v-else>
                      <el-tooltip
                        effect="dark"
                        :content="`风速超过${getLevel('小型气象站', item.windSpeed)}安全起降阈值`"
                        placement="top"
                      >
                        <span
                          >风速超过{{ getLevel('小型气象站', item.windSpeed) }}安全起降阈值</span
                        >
                      </el-tooltip>
                    </p>
                  </template>
                </li>
              </vue3-seamless-scroll>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<style scoped lang="scss">
.AirspacePop {
  position: fixed;
  z-index: 9;
  top: 100px;
  right: 400px;
  width: 620px;
  height: 350px;
  background: url('@img/pop/device-attributes-bg.png');
  background-size: 100% 100%;

  .title {
    display: flex;
    padding: 22px 50px 0 55px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;

    span:last-child {
      width: 18px;
      height: 18px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .content > p {
    height: 100%;
    display: flex;
    justify-content: center;
    color: #85b9cb;
  }
  .content {
    height: calc(100% - 100px);
    padding: 10px;
    .NavComponent {
      margin-top: 20px;
    }

    .videobox {
      margin: 12px 20px;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: center;
      // background: rgba(0, 213, 255, 0.12);
      // box-shadow: inset 0px 0px 28px 0px rgba(0, 213, 255, 0.42);
      // border: 3px solid #2c8596;

      img {
        width: 37px;
        height: 37px;
      }

      video {
        width: 100%;
        height: 100%;
      }
    }
    .table {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      .thead {
        width: 100%;
        height: 37px;
        display: flex;
        background: url('@img/infrastructure/table_header_bg.png');
        background-size: 100% 100%;

        li {
          flex: 1;
          line-height: 37px;
          text-align: center;

          &:first-child {
            flex: 2;
          }
        }
      }

      .tbody {
        height: 150px;
        overflow: hidden;

        li {
          display: flex;
          height: 37px;
          line-height: 37px;
          border-bottom: 1px solid #0f496c;

          &:nth-child(odd) {
            background-color: rgba(15, 73, 108, 0.3);
          }

          p {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;

            &:first-child {
              flex: 2;
            }

            span {
              width: 100%;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .chart {
      width: 100%;
      height: 200px;
      margin-top: 10px;
    }
  }
  .info_box {
    display: flex;
    // flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    height: 200px;
    background: url('@img/infrastructure/radar_bg.png');
    background-size: 100% 100%;
    margin-top: 10px;
    img {
      display: block;
      width: 135px;
      height: 135px;
      margin-left: 20px;
    }
    .right_info {
      width: 200px;
      height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p {
        span:first-child {
          color: rgba(175, 235, 255, 1);
        }
      }
    }
  }
}
</style>
